<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>魔改阿里云盘登录页</title>
  <link rel="stylesheet" href="login.css">
</head>
<body>
  <img src="logo.svg" class="logo" alt="">

  <div class="login-app">
    <!-- 选择登录方式部分 -->
      <input type="radio" name="login-opt" id="message" checked="checked">
      <label for="message" class="m-btn">短信登录</label>
      <input type="radio" name="login-opt" id="username">
      <label for="username" class="u-btn">账号登录</label>
      <input type="radio" name="login-opt" id="qrcode">
      <label for="qrcode" class="q-btn">扫码登录</label>
    <!-- 登录表单部分 -->
      <div id="form-bar">
        <!-- 短信登录表单 -->
        <form action="" class="m-form">
          <input type="text" placeholder="请输入手机号码">
          <input type="text" placeholder="请输入验证码"><button class="vercode-btn">获取验证码</button>
          <input type="checkbox" name="" id="sure">
          <label for="sure" class="tobesure"><p>未注册手机登录时会自动创建新账号，我已阅读并同意<a href="">服务协议</a>和<a href="">隐私权条款</a></p></label>
          <button class="login-btn">登录</button>
        </form>
        <!-- 账号登录表单 -->
        <form action="" class="u-form">
          <input type="text" placeholder="请输入手机号码">
          <input type="password" placeholder="登录密码">
          <button class="login-btn">登录</button>
        </form>
        <!-- 扫码登录表单 -->
        <form action="" class="q-form">
          <div class="qrcode">
            <img src="qrcode.png" alt="">
          </div>
        </form>
      </div>
  </div>
</body>
</html>